<template>
    <div class="search-bar">
        <div class="item">
            <span style="width: 95px">节点名称:</span>
            <el-input v-model="searchForm.nodeName" placeholder="请输入节点名称" clearable></el-input>
            <el-button type="primary" @click='searchNode'>搜索</el-button>
        </div>
        <div class="item">
            <el-button icon="el-icon-refresh" @click="refreshGraph"></el-button>
        </div>
      <div class='item'>
        <el-button type='primary' icon='el-icon-refresh' @click='to3DGraph'>3D</el-button>
      </div>
    </div>
</template>

<script>
export default {
    name: 'SearchBar',
    data() {
        return {
            searchForm: {
                nodeName: ''
            }
        };
    },
    mounted() {
        this.$emit('getData');
    },
    methods: {
        refreshGraph() {
            this.$emit('refresh');
        },
      searchNode(){
          this.$emit('searchNode',this.searchForm.nodeName)
      },
      to3DGraph(){
          this.$router.push("/threedgraph")
      }
    }
};
</script>

<style lang="scss" scoped>
.search-bar {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    background: #ffffff;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px ;
    .item {
        display: flex;
        height: 100%;
        align-items: center;
    }
}
.el-form {
    display: flex;
    align-items: center;
}
.el-form-item {
    display: flex;
    align-items: center;
}
.el-col {
    display: flex;
    align-items: center;
}
.el-button {
    margin-left: 5px;
}
</style>
